{include file="public/header"/}
<style>
    .my-setting {
        margin: 10px 0px;
        background: #fff;
        border-radius: 8px;
    }

    .my-setting .head {
        height: 40px;
        line-height: 40px;
        background: #ddd;
        display: flex;
        justify-content: space-between;
    }

    .my-setting .head .title {
        padding: 0px 15px;
    }

    .my-setting .head .action {
        padding: 0px 15px;
    }

    .copy-js-content {
        display: block;
        width: 100%;
        padding: 10px;
        border: none;
        resize: none;
        background: rgba(240, 240, 240, .8);
        margin: 15px 0px;
        font-size: 16px;
        font-weight: bold;
    }
</style>
<div id="container">
    <div class="front" style="position: absolute;left:1%;top:10px;width: 98%;">
        <div class="my-setting">
            <div class="head">
                <div class="title">
                    部署网页组件（推荐）：网页咨询组件同时支持桌面网站和移动网站，提供强大的用户行为采集能力和系统对接能力
                </div>

            </div>
            <br/>
            <div>
                聊天框样式：
                <select name="type" id="type" onchange="swith()" style="padding: 3px;font-size: 14px;">
                    <option value="0" selected>标准窗口</option>
                    <option value="1">迷你窗口</option>

                </select>
            </div>
            <br/>

            <div class="method">
                <button class="layui-btn layui-btn-normal"
                        style="background: #ddd;color: black;height: 30px;line-height: 35px;" onclick="build()">生成js
                </button>
                <button id="bulidhtml" class="layui-btn layui-btn-normal"
                        style="background: #ddd;color: black;height: 30px;line-height: 35px;" onclick="show()">生成html
                </button>
                <button id="bulidlink" class="layui-btn layui-btn-normal"
                        style="background: #ddd;color: black;height: 30px;line-height: 35px;" onclick="buildlink()">
                    生成我的专属连接
                </button>

                <div id="codearea" class="hide">
                    <pre id="wolive-js" class="copy-js-content" readonly style="color:green;"></pre>
                    <div id="frontjs" class="hide">
                        <textarea class="copy-js-content" style="color:green;height:260px;">
&lt;link rel='stylesheet' href='{$web}/assets/css/index/wolive_online.css'>
&lt;div class="wolive-form"  id="wolive-kefu" >
    &lt;i class="wolive-icon">&lt;/i>
    &lt;form class="wolive-item" action="{$web}/index/index/home?visiter_id=&visiter_name=&avatar=&business_id={$business}&groupid=0" method="post" target="_blank" >
        &lt;input type="hidden" name="product"  value=''>
        &lt;input type="submit" value='在线咨询'>
    &lt;/form>
{foreach $class as $v}
    &lt;form class="wolive-item" action="{$web}/index/index/home?visiter_id=&visiter_name=&avatar=&business_id={$business}&groupid={$v.id}" method="post" target="_blank" >
        &lt;input type="hidden" name="product"  value=''>
        &lt;input type="submit" value='{$v.groupname}'>
    &lt;/form>
{/foreach}
&lt;/div>
</textarea>
                        <pre style="color:orange;" class="copy-js-content">
                            可以在action的url里传递用户相关数据实现现有网站用户与客服系统打通例如：
                            visiter_id=用户id&visiter_name=用户昵称&avatar=urlencode后的用户头像地址。

                            name为product的表单value可以传递商品信息给客服，例如：
                            &lt;input type="hidden" name="product"  value='{"pid":1,"title":" Apple MacBook Air ","img":"http://www.wolive.cc/assets/images/pro.jpg","info":"13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)","price":"￥7588.00","url":"http://www.wolive.cc/demo/index/product1"}'>
                        </pre>
                    </div>
                    <pre id="minjs" class="copy-js-content hide" style="height: 200px;color:orange;">
                            如果需要添加自身网站用户数据，则在再加上如下代码：
                            &lt;script >
                                &nbsp;&nbsp;wolive.visiter_id='';//访客id
                                &nbsp;&nbsp;wolive.visiter_name='';//访客昵称
                                &nbsp;&nbsp;wolive.avatar='';//访客头像绝对路径
                                &nbsp;&nbsp;wolive.product='{"pid":1,"title":" Apple MacBook Air ","img":"http://www.wolive.cc/assets/images/pro.jpg","info":"13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A)","price":"￥7588.00","url":"http://www.wolive.cc/demo/index/product1"}';// 这里可以传递给客服商品信息，如果不需要则不需要设置wolive.product
                            &lt;/script>
                    </pre>

                    <pre id="link" class="hide" style="margin-top:20px;">
                        <input type="text" value="{$link}" style="width:860px;padding:6px;font-size:13px;" id="linkurl"/> &nbsp;&nbsp;&nbsp;&nbsp;<a
                            href='javascript:copylink("linkurl")' class='am-badge am-badge-primary' style="padding:8px;font-size:15px">复制</a>
                    </pre>

                </div>
            </div>
        </div>
    </div>

</div>

<script>

    var swith = function () {

        $type = $("#type").val();
        if ($type == 0) {
            $("#bulidhtml").removeClass('hide');
            $("#bulidlink").removeClass('hide');
            $("#codearea").addClass('hide');
            $("#wolive-js").addClass('hide');
            $("#frontjs").addClass('hide');
            $("#wolive-kefu").remove();
        } else if ($type == 1) {
            $("#bulidlink").addClass('hide');
            $("#bulidhtml").addClass('hide');
            $("#codearea").addClass('hide');
            $("#wolive-js").addClass('hide');
            $('#minjs').addClass('hide');
            $("#wolive-kefu").remove();
        }
    }

    var build = function () {
        $type = $("#type").val();
        if ($type == 0) {
            $("#frontjs").addClass('hide');
            $.ajax({
                url: '/admin/set/createFrontjs',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            icon: 1, end: function () {
                                $("#link").addClass('hide');
                                $("#wolive-js").removeClass('hide');
                                $("#codearea").removeClass('hide');
                                $("#minjs").removeClass('hide');
                                var str = '&lt;!-- 将下面代码放在&lt;body&gt;&lt;/body&gt;之间 --&gt;\n&lt;script src="' + res.data + '">&lt;/script>';
                                $("#wolive-js").html(str);
                                var newstr = '<script src="' + res.data + '">';
                                $("#container").append(newstr);
                            }
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
        } else if ($type == 1) {

            $.ajax({
                url: '/admin/set/createMinjs',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            icon: 1, end: function () {
                                $("#link").addClass('hide');
                                $("#wolive-js").removeClass('hide');
                                $("#codearea").removeClass('hide');
                                $("#frontjs").addClass('hide');
                                $("#minjs").removeClass('hide');
                                var str = '&lt;!-- 将下面代码放在&lt;body&gt;&lt;/body&gt;之间 --&gt;\n&lt;script src="' + res.data + '"> &lt;/script>';
                                $("#wolive-js").html(str);
                                var newstr = '<script src="' + res.data + '">';
                                $("#container").append(newstr);

                            }
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
        }
    }

    var show = function () {

        $type = $("#type").val();
        if ($type == 0) {
            $("#codearea").removeClass('hide');
            $("#wolive-js").addClass('hide');
            $("#frontjs").removeClass('hide');
            $("#minjs").addClass('hide');
            $("#link").addClass('hide');
            $("#container").append('{$html}');
        }
    }

    var buildlink = function () {
        $type = $("#type").val();
        if ($type == 0) {
            $("#codearea").removeClass('hide');
            $("#wolive-js").addClass('hide');
            $("#frontjs").addClass('hide');
            $("#minjs").addClass('hide');
            $("#link").removeClass('hide');
        }
    }

    function copylink(id) {
        var Input = $('#' + id);
        Input.focus();
        Input.select();
        try {
            document.execCommand('copy');
            layer.msg('复制成功', {time: 1000});
        } catch (e) {
            console.log(e);
            layer.msg('复制失败', {time: 1000});
        }
    }


</script>

{include file="public/footer"/}
